import React from 'react'
 

 export const DragItem =React.createClass({
	
	handleDragStart :function(e) {
		this.props.onDragStart(this.props.id);
	},
	 render: function() { 
	 	
	 	let { id, name,onDragEnd } = this.props;
	 	
	    return (
				<div 
				key={id}
				onDragStart={this.handleDragStart}
				onDragEnd={onDragEnd}
				draggable="true">
					 {name}
			 	</div>
	    )
   }
})
 
export const Drag = React.createClass({
	
	handleDragEnter :function(e)  {
		
		e.preventDefault();
		if (this.props.canDragIn) {
			this.setState({
				in: true
			})
		}
	},
	handleDragLeave :function(e)  {
		e.preventDefault();
		if (this.props.canDragIn) {
			this.setState({
				in: false
			})
		}
	},
	handleDrop :function(e)  {
		e.preventDefault();
		this.props.dragTo(this.props.status);
		this.setState({
			in: false
		})
	},
	 render: function() {  
	 	
	let { id,status,name,children} = this.props;
	
    return (
    	
    	
		<li
		 	key={id}
			onDragEnter={this.handleDragEnter}
			onDragLeave={this.handleDragLeave}
			onDragOver={this.handleDragEnter}
			onDrop={this.handleDrop}
				 
		 	>
	 			<h3>{name}</h3>
	 			 <div className="maininfo">
	 			 	{children}
	 			 </div>
	 		</li>
    )
   }
})